<!-- 20220731 待调试 -->
<template>
  <div class="_wrapper">
    <el-image
      class="_wrapper"
      :src="imgs[0]"
      :preview-src-list="imgs"
      :fit="fit"
      :preview-teleported="true"
    />
  </div>
</template>

<script>
import toolImg from "@/tool/tool-img";

export default {
  props: {
    value: {
      type: [Array, String],
      default: "",
    },
    fit: {
      type: String,
      default: "cover",
    },
  },
  data() {
    return {
      imgs: [],
    };
  },
  mounted() {
    this.initUrls();
  },
  methods: {
    initUrls() {
      if (!this.value) {
        return;
      }
      let imgs = [];
      if (this.value instanceof Array) {
        imgs = this.value.filter((item) => item);
      }
      if (typeof this.value == "string") {
        imgs = this.value.split(",");
      }
      imgs.forEach((url) => {
        this.imgs.push(toolImg.img(url));
      });
    },
  },
};
</script>

<style scoped></style>
